<script lang="ts" setup>
import {getCurrentInstance, reactive} from "vue";
import {service} from "@/utils";
import store from "@/store";

const {proxy} = getCurrentInstance() as any;
const {user} = store.userStore;

const uriProperties = reactive({
    tab: proxy?.$auth('uri:view'),
    loading: false,
    uris: [] as Array<any>,
    handle: {
        refresh: () => {
            uriProperties.loading = true;
            service.get('/setting/uri').then(({code,data}) => {
                uriProperties.uris = code === 200? data.rows:[]
            }).finally(() => uriProperties.loading = false)
        },
        add: () => {
            service.post('/setting/uri', {resourceType: 'API', creator: user.userId, status: '1'}).then(({code,data}) => {
                code === 200 && uriProperties.handle.refresh()
            })
        },
        edit:  (row: any, type: string) => {
            if (type === 'edit') {
                row.editing = true;
            } else if (type === 'cancel') {
                delete row.editing;
                uriProperties.handle.refresh();
            } else {
                const form = {
                    id: row.id,
                    uri: row.uri,
                    description: row.description,
                    category: row.category,
                    resourceType: row.resourceType,
                    appId: row.appId,
                    appKey: row.appKey,
                    status: row.status,
                    creator: row.creator,
                }
                service.put('/setting/uri', form).then(({code}) => {
                    if (code === 200) {
                        delete row.editing;
                    }
                    uriProperties.handle.refresh();
                })
            }
        },
        delete: (row: any) => {
            service.confirm(`确定删除${row.description}?`, {
                url: '/setting/uri',
                data: {id: row.id},
                success: uriProperties.handle.refresh
            })
        }
    }
})

defineExpose({
    refresh: uriProperties.handle.refresh
})
</script>

<template>
    <el-tab-pane v-if="uriProperties.tab" :label="uriProperties.tab.title" name="uri" v-loading="uriProperties.loading">
        <el-table :data="uriProperties.uris" stripe>
            <el-table-column label="#" type="index" width="70" align="center">
                <template #header>
                    <el-button v-auth="'uri:add'" :circle="true" :size="'small'" @click="uriProperties.handle.add()"/>
                </template>
            </el-table-column>
            <el-table-column label="URI" prop="uri" width="300">
                <template #default="scope">
                    <el-input v-if="scope.row.editing" v-model="scope.row.uri" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="description" width="200">
                <template #default="scope">
                    <el-input v-if="scope.row.editing" v-model="scope.row.description" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="类别" prop="category" width="150">
                <template #default="scope">
                    <el-input v-if="scope.row.editing" v-model="scope.row.category" placeholder="请输入内容"/>
                </template>
            </el-table-column>
            <el-table-column label="资源类型" prop="resourceType" width="100">
                <template #default="scope">
                    <el-select v-if="scope.row.editing" v-model="scope.row.resourceType">
                        <el-option label="API" value="API"/>
                        <el-option label="WEB" value="WEB"/>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="APP_ID" prop="appId" :min-width="150">
                <template #default="scope">
                    <el-input v-if="scope.row.editing" v-model="scope.row.appId" placeholder="请输入内容"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="APP_KEY" prop="appKey" :min-width="150">
                <template #default="scope">
                    <el-input v-if="scope.row.editing" v-model="scope.row.appKey" placeholder="请输入内容"></el-input>
                    <span v-else>{{ scope.row.appKey }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" header-align="left" align="center" width="100">
                <template #default="scope">
                    <el-select v-if="scope.row.editing" v-model="scope.row.status">
                        <el-option label="禁用" value="0"/>
                        <el-option label="启用" value="1"/>
                    </el-select>
                    <span v-else>
                        <el-tag :type="scope.row.status === '1'?'success':'danger'">{{scope.row.status === '1'?'启用':'禁用'}}</el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="200">
                <template #default="scope">
                                <span class="kt-operation">
                                    <el-button v-if="!scope.row.editing" v-auth="'uri:update'" text type="primary" @click="uriProperties.handle.edit(scope.row, 'edit')"/>
                                    <el-button v-else v-auth="'uri:update'" text type="primary" @click="uriProperties.handle.edit(scope.row, 'save')">
                                        <template #icon>
                                            <svg-icon icon="icon-save"/>
                                        </template>
                                        保存
                                    </el-button>
                                    <el-button v-if="scope.row.editing" text type="danger" @click="uriProperties.handle.edit(scope.row, 'cancel')">
                                        <template #icon>
                                            <svg-icon icon="icon-close"/>
                                        </template>
                                        取消
                                    </el-button>
                                    <el-button  v-if="!scope.row.editing"  v-auth="'uri:delete'" text type="danger" @click="uriProperties.handle.delete(scope.row)"/>
                                </span>
                </template>
            </el-table-column>
        </el-table>
    </el-tab-pane>
</template>

<style scoped>

</style>